<template>
	<!-- 在线客服 -->
	<view class="diy-service" :style="{ right: itemStyle.right + '%', bottom: itemStyle.bottom + '%' }">
		<!-- 拨打电话 -->
		<block v-if="params.type == 'phone'">
			<form @submit="onServiceEvent" report-submit="true">
				<button formType="submit" class="btn-normal">
					<view class="service-icon"><image class="image" :src="params.image"></image></view>
				</button>
			</form>
		</block>
		<!-- 在线聊天 -->
		<block v-else-if="params.type == 'chat'">
			<button open-type="contact" class="btn-normal">
				<view class="service-icon"><image class="image" :src="params.image"></image></view>
			</button>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		itemIndex: String,
		itemStyle: Object,
		params: Object
	},
	data() {
		return {};
	},
	methods: {
		onServiceEvent(e) {
			// 拨打电话
			uni.makePhoneCall({
				phoneNumber: this.params.phone_num
			});
		}
	}
};
</script>

<style>
/* common.wxss */
/* @import "/utils/common.wxss"; */

/* 在线客服 */

.diy-service {
	position: fixed;
	z-index: 999;
}

.diy-service .service-icon {
	padding: 10rpx;
}

.diy-service .service-icon .image {
	display: block;
	width: 90rpx;
	height: 90rpx;
}
</style>
